<template>
	<view  :class="pageData.state == 1?'p-bot180':'p-bot30'">
		<status-bar title='订单详情'></status-bar>
		<view class="rowTop d-flex a-center" v-if="pageData.state == 1">
			<view class="flex-1 d-flex f-column">
				<text class="color_FF8 size30 bold">待安装</text>
				<text class="color_33 h6 m-top20">请在 {{pageData.reservationDate}} 前到达指定地点</text>
			</view>
			<image :src="$online('tools.png')" class="tools m-right20"></image>
		</view>
		<view class="rowTop d-flex a-center" v-if="pageData.state == 2">
			<view class="flex-1 d-flex f-column">
				<text class="color_FF8 size30 bold">已完成</text>
				<text class="color_33 h6 m-top20">于 2022-07-15 18:01:21 完成安装</text>
			</view>
			<image :src="$online('over.png')" class="over m-right20"></image>
		</view>

		<view class="rowTop" v-if="pageData.state == 3">
			<view class="row a-center">
				<view class="flex-1 d-flex f-column m-right20">
					<text class="color_FF8 size30 bold">安装失败</text>
					<text class="color_33 h6 m-top20">{{pageData.end_content}}</text>
				</view>
				<image :src="$online('close.png')" class="close m-right20"></image>
			</view>
			<view class="row" v-if="pageData.endPhotoArr && pageData.endPhotoArr.length">
				<image :src="$imgUrls(item)" mode="aspectFill" class="error_img"
					v-for="(item,index) in pageData.endPhotoArr" :key="index"
					@click="$common.previewImgs(index,pageData.endPhotoArr)"></image>
			</view>
		</view>



		<view class="row m-top30 bgwhite">
			<view class="row padding30 bot">
				<view class="d-flex a-center">
					<text class="black size30 bold" selectable>{{pageData.res_name}}</text>
					<text class="black size30 m-left30" selectable>{{pageData.res_tel}}</text>
				</view>
				<text class="size26 color_33 m-top20" selectable>{{pageData.res_address}}</text>
			</view>
			<view class="row padding20">
				<text class="size26 color_99">备注信息</text>
				<view class="flex-1 m-left30 color_33 h6" v-if="pageData.remarks">{{pageData.remarks}}</view>
			</view>
		</view>


		<view class="row bgwhite m-top30 padding30">
			<view class="row a-center">
				<view class="iconfont icon-a-010 color_33 size34"></view>
				<text class="color_33 size26 m-left10">直营店</text>
			</view>

			<view class="row m-top20" v-for="(item,index) in pageData.goodsList" :key="index">
				<image :src="$imgUrls(item.photo)" mode="aspectFill" class="proct_img m-right30"></image>
				<view class="flex-1 d-flex f-column j-sb height">
					<text class="ellipsis_2 color_33 h6">{{item.name}}</text>
					<!-- <view class="row j-sb a-center">
						<view class="d-flex a-center color_ff2 ">
							<text class="h6">￥</text>
							<text class="size32">{{item.price}}</text>
						</view>
						<text class="color_99 h6">X{{item.num}}</text>
					</view> -->
					<view class="row j-sb a-center">
						<text class="color_99 h6">安装费</text>
						<view class="d-flex a-center color_ff2 ">
							<text class="h6">￥</text>
							<text class="size32">{{item.install_money}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>




		<view class="row m-top30 bgwhite">
			<view class="row a-center j-sb padding20-30 h6">
				<view class="d-flex a-center ">
					<text class="color_99 m-right50 size26">订单编号</text>
					<text class="black size26">{{pageData.order_code}}</text>
				</view>
				<text class="color_32 size26" @click="$pop.setClip(pageData.order_code)">复制</text>
			</view>
			<view class="row a-center  padding20-30 h6">
				<text class="color_99 m-right50 size26">下单时间</text>
				<text class="black size26">{{pageData.addDate}}</text>
			</view>
			<view class="row a-center  padding20-30 h6">
				<text class="color_99 m-right50 size26">分配时间</text>
				<text class="black size26">{{pageData.allocateDate}}</text>
			</view>
		</view>


		<view class="row m-top30 bgwhite">
			<!-- <view class="row padding20-30 a-center j-sb">
				<text class="size26 black">宝贝金额</text>
				<view class="d-flex a-center color_ff2 ">
					<text class="h6">￥</text>
					<text class="size32">788.00</text>
				</view>
			</view> -->

			<view class="row padding20-30 a-center j-sb">
				<text class="size26 black">安装费</text>
				<view class="d-flex a-center color_ff2 ">
					<text class="h6">￥</text>
					<text class="size32">{{pageData.all_Money | all_Money}}</text>
				</view>
			</view>
		</view>



		<view class="footer d-flex" v-if="pageData.state == 1">
			<view class="d-flex a-center color_ff2 m-left30">
				<text class="h6">￥</text>
				<text class="size42">{{pageData.all_Money | all_Money}}</text>
			</view>
			<view class="flex-1 d-flex a-center j-end m-right30">
				<view class="fbtns flexac white size28  overTxt" @click.stop="showCode = true">完成</view>
				<view class="fbtns flexac  color_99 size28 errorTxt" @click.stop="show = true">有误</view>
			</view>
		</view>


		<view class="maskings flexac" v-if="showCode">
			<view class="viewbox bgwhite padding40 bor_radius_10 d-flex f-column a-center">
				<image :src="$online('message.png')" mode="aspectFill" class="message_img"></image>
				<text class="black size28 bold500 m-top30">请向用户获取安装验证码</text>
				<view class="row j-centert m-top40">

					<input type="number" class="Code" v-for="(item,index) in codeList" :key="index" v-model="item.num"
						:focus="item.focus" @input="inputPalce($event,index)" @blur="inputBlur($event,index)"
						:maxlength="1">
				</view>

				<view class="row j-sb a-center m-top80">
					<view class="Code_btn bor_radius_10 flexac cancel" @click.stop="showCode = false">取 消</view>
					<view class="Code_btn bor_radius_10 flexac continum" @click="endOrder(2)">提 交</view>
				</view>
			</view>
		</view>



		<view class="maskings d-flex f-column j-end" v-if="show">
			<view class="rows popupCon bgwhite">
				<view class="u-popup">
					<view class="row j-centert black size30 bold500">提交前请先与用户进行沟通确认</view>
					<textarea class="textarea" v-model="end_content" disable-default-padding
						placeholder="请输入失败原因"></textarea>
					<view class="row m-top20">
						<view class="uploads flexac" @click="uploads" v-if="end_photo.length < 9">
							<view class="iconfont icon-xiangji"></view>
						</view>
						<view class="uploadList" v-for="(item,index) in end_photo" :key="index">
							<image :src="$imgUrls(item)" mode="aspectFill" class="uploadImg"></image>
							<view class="iconfont icon-close-f color_FF3 size34" @click.stop="delImg(index)"></view>
						</view>

					</view>
				</view>
				<view class="fot d-flex m-top80">
					<view class="flex-1 cancel_fot flexac size30" @click.stop="show = false">取 消</view>
					<view class="flex-1 sub_fot flexac size30" @click="endOrder(3)">提 交</view>
				</view>
			</view>
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				res_id: '',
				pageData: '',
				showCode: false,
				codeList: [{
					num: '',
					focus: true,
				}, {
					num: '',
					focus: false,
				}, {
					num: '',
					focus: false,
				}, {
					num: '',
					focus: false,
				}],
				codeTxt: '',
				end_content: '',
				end_photo: [],
				show: false,
			}
		},
		onLoad(opt) {
			if (opt.res_id) this.res_id = opt.res_id;
			this.apiOrderInfo();
		},
		methods: {
			apiOrderInfo() {
				this.$http.post({
					url: '/dispatch/apiOrderInfo',
					data: {
						res_id: this.res_id,
					}
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					this.pageData = res.data;
				})
			},


			endOrder(state) {
				let code = '';
				let data = {
					res_id: this.res_id,
					state,
				};
				if (state == 2) {
					const flag = this.codeList.every(item => item.num != '');
					if (!flag) return this.$Toast('请输入验证码~');
					this.codeList.forEach((item, index) => {
						code += item.num
					})
					data['code'] = code;
				} else if (state == 3) {
					if (!this.end_content) return this.$Toast('请输入失败原因~');
					data['end_content'] = this.end_content
					data['end_photo'] = this.end_photo.join(',')
				}
				this.$http.post({
					url: '/dispatch/endOrder',
					data
				}).then(res => {
					this.showCode = false;
					this.show = false;
					this.$Toast(res.msg);
					this.apiOrderInfo();
				})
			},






			inputPalce(e, index) {
				if (e.detail.value) this.watchData();
			},
			inputBlur(e, index) {
				if (!e.detail.value) {
					this.codeList[index].focus = false;
				}
			},


			watchData() {
				this.codeList.forEach((item, index) => {
					if (item.num && this.codeList[index + 1] && !this.codeList[index + 1].num) {
						item.focus = false;
						this.codeList[index + 1].focus = true
					}
				})
			},


			async uploads() {
				const count = 9 - this.end_photo.length;
				const list = await this.$common.chooseImage(count);
				if (!list.length) return;
				this.end_photo = [...this.end_photo, ...list];
			},
			delImg(index) {
				this.end_photo.splice(index, 1)
			}
		},
		filters: {
			all_Money(val) {
				if (!val) return;
				return val.toFixed(2)
			}
		},

	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.rowTop {
		width: 100%;
		padding: 50rpx 30rpx;
		background-color: #ffffff;
	}

	.tools {
		display: block;
		width: 82rpx;
		height: 82rpx;
	}

	.over {
		width: 73rpx;
		height: 76rpx;
	}

	.close {
		width: 72rpx;
		height: 72rpx;
	}

	.proct_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	.error_img {
		width: 140rpx;
		height: 140rpx;
		margin: 20rpx 20rpx 0 0;
		border-radius: 10rpx;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		box-sizing: content-box;
		bottom: 0;
		left: 0;
		z-index: 100;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

	}

	.foBot {
		width: 100%;
		height: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.footer_info {
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		// padding: 20rpx 30rpx;
		box-sizing: content-box;
	}

	.fbtns {
		width: 200rpx;
		height: 70rpx;
		border-radius: 35rpx;
		margin-left: 30rpx;
	}

	.overTxt {
		background-color: #3257E0;
	}

	.errorTxt {
		border: 1rpx solid #ccc;
	}

	.message_img {
		width: 117rpx;
		height: 77rpx;
	}

	.Code {
		width: 66rpx;
		height: 66rpx;
		border: 1rpx solid #6988E2;
		border-radius: 8rpx;
		overflow: hidden;
		font-size: 30rpx;
		text-align: center;
		line-height: 66rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}

	.Code_btn {
		width: 240rpx;
		height: 76rpx;
		font-size: 32rpx;
	}

	.cancel {
		background-color: #C1C8DC;
		color: #8A90A2;
	}

	.continum {
		background-color: #6F92FA;
		color: #fff;
	}

	.popupCon {
		border-radius: 20rpx 20rpx 0 0;
		
	}

	.u-popup {
		width: 100%;
		padding: 36rpx 30rpx 0 30rpx;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		margin-top: 34rpx;
		padding: 20rpx;
		font-size: 26rpx;
		color: #000;
	}

	.uploads {
		width: 130rpx;
		height: 130rpx;
		border-radius: 6rpx;
		background-color: #F3F7FF;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.icon-xiangji {
		color: #CBD5EA;
		font-size: 76rpx;
	}

	.uploadList {
		width: 130rpx;
		height: 130rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.uploadImg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.icon-close-f {
		position: absolute;
		top: 2rpx;
		right: 2rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}

	.fot {
		width: 100%;
		height:90rpx;
		overflow: hidden;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom)
	}

	.sub_fot {
		height:100%;
		background-color: #6f92fa;
		color: #ffffff;
	
	}

	.cancel_fot {
		height:100%;
		background-color: #d7dcea;
		color: #8A90A2;
	

	}
</style>